<header>
    使用键盘和鼠标控制物体
</header>
<h2>
    捕获用户意图
</h2>
<p>
    也就是捕获用户的鼠标滚轮是否滚动了，是否拖拽屏幕了，方向键是否按下了这里的操作，这里直接使用
    <a href="#/api/viewHandler" target="_blank">控制信息捕获</a>
    即可，非常简单，就像这样：
</p>
<pre tag="javascript">
import { viewHandler } from 'vislite';
viewHandler(function (params) {
    console.log(params);
});
</pre>
<p>
    用户每次进行操作的时候，就会触发回调，而其中params就记录着此次操作的具体信息，比如鼠标左键按下拖拽的时候，打印大体如下：
</p>
<pre tag="javascript">
{
    "type": "rotate",
    "normal": [-1, -2, 0],
    "value": 0.03
}
</pre>
<p>
    type值是"rotate"表示希望让物体旋转，旋转的方向由法向量normal按照右手螺旋法则确定，旋转弧度为value（别的类似，打印一下看看结果就可以了，更具体的你可以查看
    <a href="#/api/viewHandler" target="_blank">控制信息捕获</a>一节文档，这里不再赘述）。
</p>
<h2>
    表达意图
</h2>
<p>
    我们提供了一个世界矩阵，你可以通过这个矩形来表达用户的意图。
</p>
<h3>
    世界矩阵
</h3>
<p>
    首先，我们需要获取这个矩阵：
</p>
<pre tag="javascript">
var matrix = painter.getMatrix();
</pre>
<p>
    其实这个矩阵就是
    <a href="#/api/matrix4" target="_blank">变换矩阵 Matrix4</a>
    ，所以你直接使用这个矩阵提供的方法即可。
</p>
<h3>
    调用矩阵方法
</h3>
<p>
    还是以旋转为例，我们直接使用矩阵的<span class="special">rotate</span>方法即可：
</p>
<pre tag="javascript">
matrix.rotate(params.value, params.normal[0], params.normal[1], params.normal[2]);
</pre>
<h3>
    重新渲染
</h3>
<p>
    此时，世界矩阵已经改变了，我们还需要最后告诉画布，重新绘制一下：
</p>
<pre tag="javascript">
painter.review();
</pre>
<p>
    下面是完整的例子代码：
</p>
<example tag="course/webgl_5" height="340px"></example>